<template>
  <div class="already-vote">
    <head-top head-title="已投票" goBack="true"></head-top>
    <div class="areas-name border-bottom">
      <span>小区名称：{{$route.params.name}}</span>
    </div>
    <div class="areas_number border-bottom">
      <div class="all_count">
        <span>总户数：<span style="color: #0078de;">{{houseNum}}户</span></span>
      </div>
      <div class="count">
        <span>已投户数：<span style="color: #0078de; font-size: 14px">{{intelList.length + phoneList.length + recycleList.length}}户</span></span>
      </div>
      <div class="pre_count">
        <span>百分比：<span style="color: #0078de">{{percentage}}%</span></span>
      </div>
    </div>
    <ul class="navbar">
      <li class="nav-item" v-for="(item, index) in dataList" :key="index" @click="showContainer(index)"><span
        :class="{'item': i===index}">{{item.name}}({{item.count || 0}})</span></li>
    </ul>
    <div class="already">
      <!--网络投票-->
      <div class="vote-wrapper" v-show="i === 0">
        <transition name="item">
          <ul class="toupiao-wrapper">
            <li class="tou-wrapper border-bottom-last" v-for="(item,key) in intelList" :key="key">
              <div class="left">{{item.areasName}}</div>
              <div class="right">
                <div class="yi-color">已投</div>
                <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                <label :for="item.id"></label>
              </div>
            </li>
          </ul>
        </transition>
      </div>
      <!--电话投票-->
      <div class="vote-wrapper" v-show="i === 1">
        <transition name="item">
          <ul class="toupiao-wrapper">
            <li class="tou-wrapper border-bottom-last" v-for="(item,key) in phoneList" :key="key">
              <div class="left">{{item.areasName}}</div>
              <div class="right">
                <div class="yi-color">已投</div>
                <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                <label :for="item.id"></label>
              </div>
            </li>
          </ul>
        </transition>
      </div>
      <!--现场票-->
      <div class="vote-wrapper" v-show="i === 2">
        <transition name="item">
          <ul class="toupiao-wrapper">
            <li class="tou-wrapper border-bottom-last" v-for="(item,key) in recycleList" :key="key">
              <div class="left">{{item.areasName}}</div>
              <div class="right">
                <div class="yi-color">已投</div>
                <input class="yi-input" type="checkbox" checked disabled name="id" :value="item.id" :id="item.id">
                <label :for="item.id"></label>
              </div>
            </li>
          </ul>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import { lookAlreadyVote } from '../../api/toupiaotongji.js'

  export default {
    name: 'AlreadyVote',
    data () {
      return {
        i: 0,
        houseNum: '',
        percentage: '',
        intelList: [],
        recycleList: [],
        phoneList: [],
        dataList: [{name: '网络投票'}, {name: '电话投票'}, {name: '现场票'}]
      }
    },
    components: {
      headTop
    },
    created () {
      this._lookAlreadyVote()
    },
    methods: {
      _lookAlreadyVote () {
        lookAlreadyVote(this.$route.params.aid, this.$route.params.vid).then(res => {
          if (res.code === 200) {
            this.houseNum = res.data.houseNum
            this.percentage = res.data.percentage
            this.intelList = res.data.intelVote // 网络
            this.recycleList = res.data.recoveryVote // 现场
            this.phoneList = res.data.phoneVote // 电话
            var currentLength = [this.intelList.length, this.phoneList.length, this.recycleList.length]
            this.dataList.forEach((item, index) => {
              this.$set(item, 'count', currentLength[index])
            })
            this.intelList.forEach(item => {
              this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
            })
            this.recycleList.forEach(item => {
              this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
            })
            this.phoneList.forEach(item => {
              this.$set(item, 'areasName', `${item.yuan}${item.zhuang}幢${item.util}单元${item.fanghao}室`)
            })
          }
        })
      },
      showContainer (index) {
        this.i = index
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        window.pageYOffset = 0
      }
    }
  }
</script>

<style lang="scss">
  .already-vote {
    padding-top: 40px;
    .navbar {
      position: fixed;
      top: 115px;
      left: 0;
      z-index: 2;
      width: 100%;
      display: flex;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      height: 40px;
      line-height: 40px;
      background-color: #fff;
      .nav-item {
        flex: 1;
        height: 100%;
        text-align: center;
        border-bottom: 2px solid #f2f2f2;
        font-size: 13px;
        .item {
          display: inline-block;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          height: 100%;
          padding: 0 10px;
          border-bottom: 2px solid #0078de;
          color: #0078de;
        }
      }
    }
    .areas-name {
      background: #fff;
      width: 100%;
      position: fixed;
      top: 40px;
      left: 0;
      display: flex;
      padding: 0px 10px;
      box-sizing: border-box;
      height: 35px;
      line-height: 35px;
      color: #666;
      z-index: 2;
      span {
        flex: 1;
        font-size: 13px;
      }
    }
    .areas_number {
      background: #fff;
      width: 100%;
      height: 40px;
      position: fixed;
      top: 75px;
      left: 0;
      z-index: 2;
      display: flex;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      line-height: 40px;
      .all_count {
        flex: 1;
        font-size: 13px;
        padding-left: 10px;
      }
      .count {
        flex: 1;
        font-size: 13px;
        text-align: center;
      }
      .pre_count {
        flex: 1;
        font-size: 13px;
        text-align: center;
      }
    }
    .already {
      margin-top: 125px;
      .vote-wrapper {
        .toupiao-wrapper {
          -webkit-overflow-scrolling: touch;
          .tou-wrapper {
            margin: 0 10px;
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            .left {
              display: inline;
              text-align: left;
            }
            .right {
              text-align: right;
              position: relative;
              top: -42px;
              height: 44px;
              input[type='checkbox'] {
                display: none
              }
              label {
                position: absolute;
                right: -8px;
                top: 12px;
              }
              label:before {
                content: '';
                position: absolute;
                left: -30px;
                top: 0;
                width: 16px;
                height: 16px;
                border: 1px solid #ddd;
                border-radius: 50%;
                transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
              }
              label:after {
                content: '';
                position: absolute;
                left: -23px;
                top: 3px;
                width: 4px;
                height: 10px;
                border: 0;
                border-right: 1px solid #fff;
                border-bottom: 1px solid #fff;
                background: #fff;
                transform: rotate(45deg);
                transition: all 0.3s ease;
              }
              input[type='checkbox']:checked + label:before {
                background: #0087de;
                border-color: #0087de;
              }
              input[type='checkbox']:checked + label:after {
                background: #0087de;
              }
              .yi-color {
                margin-right: 25px;
              }
            }
          }
        }
      }
    }
  }
</style>

